"Simon Wigzell" <si**********@shaw.ca> writes:
How do a create a floating div that will always stay in the same place
relative to the browser window as the user scrolls the main page? I guess an
adaptation of one of these floating menus that always stay in view would
work but I just need the few lines of code to keep it positioned a certain x
and y pix location from the window top left corner... Thanks!
Use CSS 2 position:fixed for browsers that support it (all modern
browsers), and use a fallback for older browsers (including all IE
versions). The fallback is based on detecting scrolling and
repositioning the element. I would usually only bother putting in a
fallback for IE 5+, using IE conditional comments:
---
<style type="text/css">
#myfixed {
position: fixed;
top: 100px;
left: 50px;
}
</style>
<!--[if IE]>
<style type="text/css">
#myfixed { position:absolute; }
</style>
<script type="text/javascript">
window.onscroll = function() {
var root = (document.compatMode == "CSS1Compat"?
document.documentElement: document.body);
var elem = document.all["myfixed"];
elem.style.left = root.scrollLeft + 50 + "px";
elem.style.top = root.scrollTop + 100 + "px";
};
</script>
<![endif]-->
....
<div id="myfixed" style="width:100px;height:100px;border:1px solid black;">
HERE<br>I<br>AM
</div>
---
/L
--
Lasse Reichstein Nielsen -
lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
